<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="200" :left="uiLeft" :top="uiTop">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-menu">
                <FucMenuList :menuList="waterMenuList" @clickComponent="clickComponent" :isDisabled="false"
                    :isChecked="true" />
            </div>
            <div class="box-choose">
                <div>
                    <span>数据集：</span>
                    <el-select v-model="currentDataSetRef" placeholder="请选择" >
                        <el-option v-for="item in dataSetRef" :key="item" :label="item" :value="item" />
                    </el-select>
                </div>
                <div>
                    <span>要素类：</span>
                    <el-tree-select v-model="currentFeatureClassRef" :data="featureClassTreeRef" check-strictly
                        :render-after-expand="false" @change="changedTree"/>
                </div>
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { waterMenuList } from "@/scripts/menu/cimrts/waterMenuList";
import FucMenuList from "@/components/common/FucMenuList.vue";
import { WaterMend } from "@/scripts/cimrtsManager/waterMend";
import PropPanel from "@/components/propPanel/index.vue";
import { findClassNameById } from "@/scripts/utils"

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 350;
// const uiTop = document.body.clientHeight - 40 - 200;
const uiTop = ref(60);


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const cimrtsManager = getProjectManager().cimrtsManager;
const eSRtsTileset = cimrtsManager.eSRtsTileset;
const waterMend = cimrtsManager.waterMend as WaterMend;

const currentDialog = ref<any>(undefined);

const propSceneTree = toVR<any>(d, [objm, "propSceneTree"])

// 数据集列表
const dataSetRef = toVR<any>(d, [waterMend, "dataSet"]);
// 当前选中的数据集
const currentDataSetRef = toVR<any>(d, [waterMend, "currentDataSet"]);
// 要素类树
const featureClassTreeRef = toVR<any>(d, [waterMend, "featureClassTree"]);
// 当前选中的要素类
const currentFeatureClassRef = toVR<any>(d, [waterMend, "currentFeatureClass"]);
// 当前选中的要素类名称
const currentFeatureClassNameRef = toVR<any>(d, [waterMend, "currentFeatureClassName"]);

// 操作多边形
const isHighlightRef = toVR<string>(d, [waterMend, "isHighlight"])

// 修改选择要素类
const changedTree = (id: any) => {
    currentFeatureClassNameRef.value = findClassNameById(id,featureClassTreeRef.value)
    console.log(currentFeatureClassNameRef.value);
}

// 鼠标点击组件
const clickComponent = (item: any) => {
    isHighlightRef.value = item.id;
    if (!currentDataSetRef.value || !currentFeatureClassRef.value) return;
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "none") {
        isHighlightRef.value = ''
        objm.propSceneTree = undefined
    }
}

watch(propSceneTree, (val) => {
    if (propSceneTree.value) return;
    if (isHighlightRef.value) {
        const item = waterMenuList.value.find((item: any) => item.id == isHighlightRef.value);
        // @ts-ignore
        item.status = 'none'
    }
    objm.propSceneTree = undefined
    isHighlightRef.value = ''
})

onMounted(() => {
    waterMend.init();
});
onBeforeUnmount(() => {
    waterMend.clear();
    waterMenuList.value.map((i: any) => i.status = "none")
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.cimrts-menu {
    background-color: #f0f0f0;
    width: calc(100%);
    height: 40px;
    display: flex;
}

.box-choose {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box-choose>div {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.box-choose div span {
    width: 80px;
    display: inline-block;
}

.box-choose>div .el-input,
.box-choose>div .el-select {
    width: 350px;
}
</style>